<template>
  <div class="address">
    <ul>
      <li v-for="(value,index) in addressList" :key="index" @click="selectAddress(value)">
        <div class="address_details">
          <div class="address_details_name">
            {{value.consignee}},{{value.phone}}
          </div>
          <div class="address_details_city">
            {{value.province}}-{{value.city}}-{{value.area}}-{{value.add_detail}}
          </div>
        </div>
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/f6/wx/edit.png" class="address_edit" @click.stop="editAddress(value.id)"/>
      </li>
      
    </ul>
    <div class="address-btn">
       <div @click="toInputAddress">
         <img src="../../../static/images/add.png" alt="" mode="scaleToFill">
         <div>手动添加 </div>
        </div>
       <div @click="getWxAddress">
         <img src="../../../static/images/wx.png" alt="" mode="scaleToFill">
         <div>微信添加</div>
        </div>
    </div>
    <!-- navigator url="/pages/inputAddress/main"  -->
    <!-- <div></div> -->
  </div>
</template>

<script>


export default {
  data () {
    return {
      addressList:"",
      orderId:"",
      consignee:'',
      postcode:'',
      province:'',
      city:'',
      area:'',
      add_detail:'',
      phone:''
    }
  },
  methods:{
    async getAddressList(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getShippingAddress',{user_token:userToken})
      this.addressList=res.data.data
      if(this.addressList.length==0){
        this.$store.dispatch('setAddress','')
      }
      console.log(this.addressList)
    },
    editAddress(id){
      this.$currency.navigateTo(`/pages/inputAddress/main?id=${id}&&orderId=${this.orderId}`)
    },
    selectAddress(address){
      if(this.type!='address'){
        this.$store.dispatch('setAddress',address)
        this.$currency.navigateTo(`/pages/orderConfirm/main`)
      }
      
    },
    toInputAddress(){
      this.$currency.navigateTo('/pages/inputAddress/main')
    },
    getWxAddress(){//获取微信地址
      const _this=this
      wx.chooseAddress({
        success(res) {
          _this.consignee=res.userName
          _this.postcode=res.postalCode
          _this.province=res.provinceName
          _this.city=res.cityName
          _this.area=res.countyName
          _this.add_detail=res.detailInfo
          _this.phone=res.telNumber
          _this.saveAddress()
        }
      })
    },
    async saveAddress(){//保存微信的地址
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/newShippingAddress',{
        user_token:userToken,
        consignee:this.consignee,
        phone:13724152320,
        province:this.province,
        city:this.city,
        area:this.area,
        add_detail:this.add_detail,
        postcode:this.postcode,
        is_default:1})
        if(res.data.level=='success'){
          this.getAddressList();//刷新数据
        }else{
          this.$currency.showToast(res.data.message)
        }
            
    }
    
  },
  onShow(){
    this.getAddressList()
    console.log(this.type)
  },
  onLoad(options){
    this.type=options.type   //这里的type如果是address   那么就代表他是我个人中心那里点击进来的，所以不能执行选择地址这个函数
    console.log(this.type)
    this.orderId=options.orderId
  }
}
</script>

<style scoped lang="scss" type="text/css">
  .address{
    width:100%;
    ul
    {
      width:100%;
      li{
        width:100%;
        height:70px;
        display:flex;
        background-color:#fff;
        justify-content:space_around;
        border-bottom:1px solid #eee;
        .address_select{
          width:20px;
          height:20px;
          margin:25px 20px;
        }
        .address_details{
          margin-left:10px;
          flex:1;
          overflow: hidden;
          .address_details_name{
            width:100%;
            line-height:30px;
          }
          .address_details_city{
            width:100%;
            line-height:40px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .address_edit{
          width:40px;
          height:40px;
          margin:15px 30px;
        }
      }
    }
    &-btn{
      width:90%;
      line-height:50px;
      
      text-align:center;
      position: absolute;
      bottom:20px;
      left:5%;
      color:#fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &>div{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color:red;
        border-radius:5px;
        width: 48%;
        img{
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
      &>div:last-child{
        background:rgb(68, 197, 68)
      }
    }
  }
</style>
